<template>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>头像</td>
                <td>
                    <input type="file" @change="img" />
            <img
              v-if="quinfor.photo != ''"
              :src="quinfor.photo"
              width="100"
              height="100"
              alt=""
            />
                </td>
            </tr>
            <tr>
                <td>楼梯</td>
                <td>
                    <input type="text" v-model="quinfor.qu">
                </td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" v-model="quinfor.name">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input
              type="radio"
              name="sex"
              :value="1"
              v-model="quinfor.sex"
            />男
            <input
              type="radio"
              name="sex"
              :value="0"
              v-model="quinfor.sex"
            />女
          </td>
                
            </tr>
            <tr>
                <td>民族</td>
                <td>
                    <input type="text" v-model="quinfor.ming">
                </td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td>
                    <input type="text" v-model="quinfor.jiGuan">
                </td>
            </tr>
            <tr>
                <td>证件</td>
                <td>
                    <input type="text" v-model="quinfor.card">
                </td>
            </tr>
            <tr>
                <td>电话</td>
                <td>
                    <input type="text" v-model="quinfor.phone">
                </td>
            </tr>
            <tr>
                <td>类型</td>
                <td>
                    <input type="text" v-model="quinfor.lie">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="填加" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();
let quinfor=reactive({
  "name": "",
  "photo": "",
  "lie": "",
  "sex": 0,
  "card": "",
  "phone": "",
  "jiGuan": "",
  "ming": "",
  "qu": "",
  "fang": "",
  "state": 0,
  "createTime": "2024-12-26T12:25:31.358Z",
  "isDelete": false
});



const img = (e: any) => {
  console.log(e);
  let obj = e.target.files[0];
  let f = new FormData();
  f.append('file', obj);

  axios({
    url: 'https://localhost:7107/api/JunMing/Img',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      //1.存储地址  2.显示图片
      if (res.data == '不是图片') {
        alert('上传的不是图片');
        return;
      }

      if (res.data == '大于2M') {
        alert('上传图片的大于2M');
        return;
      }

      quinfor.photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
const add=()=>{
    axios({
        url:'https://localhost:7107/api/JunMing/Add',
        method:'post',
        data:quinfor,
    })
    .then((res)=>{
        console.log(res);
        alert("成功!");
        router.push("\jumingshow");
    })
    .catch((err)=>{
        console.log(err);
        alert("失败!");
    })
}
</script>

<style scoped>

</style>